<template>
  <div >
    <Drawer :title="Drawertitle" v-model="showDYJFD" width="95%" :mask-closable="false" :styles="styles">
        <Menu mode="horizontal" theme="dark" active-name="1" @on-select="selectMenuItem">
            <MenuItem name="1">
                <Icon type="ios-paper" />基本情况
            </MenuItem>
            <MenuItem name="2">
                <Icon type="ios-people" />积分加减分项
            </MenuItem>
            <MenuItem name="3">
                <Icon type="ios-people" />季度日常行为积分
            </MenuItem>
            <MenuItem name="4">
                <Icon type="ios-people" />年度总积分
            </MenuItem>
            <MenuItem name="5">
                <Icon type="ios-people" />支部评分
            </MenuItem>
            <MenuItem name="6">
                <Icon type="ios-people" />季度评分
            </MenuItem>
            <MenuItem name="7">
                <Icon type="ios-people" />用户管理
            </MenuItem>
    </Menu>
    <component :is="showcomponent.name" :ref='showcomponent.name' :persondata="persondata"></component>
    <!-- <BackTop></BackTop> -->
    </Drawer>
  </div>
</template>

<script>
import {mapActions} from 'vuex';

import fujian1 from './fujian1.vue'
import fujian2 from './fujian2.vue'
import fujian3 from './fujian3.vue'
import fujian4 from './fujian4.vue'
import fujian5 from './fujian5.vue'
import fujian6 from './fujian4.vue'
import fujian7 from './fujian5.vue'
export default {
  components:{
    fujian1,
    fujian2,
    fujian3,
    fujian4,
    fujian5,
    fujian6,
    fujian7
  },
  props:{

  },
  data(){
    return {
        showDYJFD:false,
        styles: {
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
        },
        Drawertitle:'',
        persondata:{},

        showcomponent:{
            name:'fujian1'
        }
    }
  },
  watch:{
      "showDYJFD":{
          handler(){
              if(this.showDYJFD==true){
                  this.Drawertitle=this.persondata.truename+' 的党员积分'
                console.log(this.persondata)
              }
          },
          deep:true
      }
  },
  computed:{},
  methods:{
    // ...mapActions(['']),
    selectMenuItem(MenuItem){
        this.showcomponent.name='fujian'+MenuItem;
    },
  },
  created(){},
  mounted(){
    
  }
}
</script>
<style  scoped>

</style>